<template>
  <div id="userLayout" :class="['user-layout-wrapper', isMobile && 'mobile']">
    <div class="title">
      <img src="@/assets/images/login/logo.png" />
      社会组织评估申报平台
    </div>
    <div class="container">
      <div class="tip"><img src="@/assets/images/login/tip.png" /></div>
      <div class="left">
        <img src="@/assets/images/login/people.png" />
      </div>
      <div class="right">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
import { deviceMixin } from '@/store/device-mixin'

export default {
  name: 'UserLayout',
  components: {
  },
  mixins: [deviceMixin],
  mounted () {
  },
  beforeDestroy () {
  }
}
</script>

<style lang="less" scoped>
#userLayout.user-layout-wrapper{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('@/assets/images/login/bg.png') no-repeat center;
  background-size: 100% 100%;
  .flex-center();
  .title {
      font-size: .vw(40) [ @return];
      position: absolute;
      top: .vh(83) [ @return];
      left: .vw(75) [ @return];
      height: .vh(76) [ @return];
      color: #fff;
      .flex-start();
      img {
        display: block;
        width: .vh(76) [ @return];
        margin-right: .vw(30) [ @return];
        margin-bottom: .vh(-8) [ @return];
      }
  }
  .container {
    position: relative;
    width: .vw(1217) [ @return];
    height:.vh( 687) [ @return];
    background: #FFFFFF;
    border-radius: 12px;
    .flex-between();
    .tip {
      position: absolute;
      bottom: .vh(-4) [ @return];
      left: .vw(-25) [ @return];
      width: .vw(87) [ @return];
      height: .vh(133) [ @return];
      img {
        display: block;
        width: 100%;
      }
    }
    .left {
      width: 50%;
      height: 100%;
      .flex-center();
      img {
        display: block;
        width: .vw(471) [ @return];
      }
    }
    .right {
      width: 50%;
      height: 100%;
    }
  }
}
</style>
